<template>
  <div class="dashboard-container">

    <!-- 实现左右布局,方式1-通过栅格系统 -->
    <!-- <el-row>
      <el-col :span="12">左</el-col>
      <el-col :span="12">右</el-col>
    </el-row> -->
    <!-- 实现左右布局,方式2-通过flex -->
    <!-- <el-row type="flex">
      <el-col>左</el-col>
      <el-col>右</el-col>
    </el-row> -->
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools :tree-node="company">
          <el-dropdown-item :disabled="!checkPermission('add-dept')" @click.native="addDept(company)">添加子部门</el-dropdown-item>
        </tree-tools>
        <el-tree
          :data="departs"
          default-expand-all
        >
          <tree-tools slot-scope="{data}" :tree-node="data">
            <el-dropdown-item :disabled="!checkPermission('add-dept')" @click.native="addDept(data)">添加子部门</el-dropdown-item>
            <el-dropdown-item @click.native="editDept(data)">编辑部门</el-dropdown-item>
            <el-dropdown-item @click.native="delDept(data.id)">删除部门</el-dropdown-item>
          </tree-tools>
        </el-tree>
      </el-card>
    </div>
    <!-- <add-dept ref="addDeptRef" :show-dialog.sync="showDialog" :tree-node="node" @addDept="getDepartments"></add-dept> -->
    <add-dept v-if="showDialog" ref="addDeptRef" :show-dialog.sync="showDialog" :tree-node="node" @addDept="getDepartments"></add-dept>
  </div>

</template>

<script>
import TreeTools from './components/tree-tools.vue'
import { delDepartment, getDepartments } from '@/api/department.js'
import { tranListToTreeData } from '@/utils'
import AddDept from './components/add-dept.vue'
export default {
  name: 'Departments',
  components: { TreeTools, AddDept },
  props: {},
  data() {
    return {
      company: { name: '', manager: '负责人', id: '' },
      departs: [],
      showDialog: false,
      node: {},
      loading: false
    }
  },
  created() {
    this.getDepartments()
  },
  mounted() {},
  methods: {
    checkPermission(key) {
      // 方式2 try-catch
      // try {
      //   return this.$store.state.user.userInfo.roles.points.includes(key)
      // } catch (e) { return false }
    },
    async editDept(data) {
      this.node = data
      this.showDialog = true
      // 方法2-1通过ref直接赋值数据(推荐)
      // this.$refs.addDeptRef.formData = await getDepartDetail(data.id)
      // 方法2-2通过ref调用方法
      // this.$refs.addDeptRef.getDepartDetail(data.id)
      this.showDialog = true
      this.$nextTick(() => {
        this.$refs.addDeptRef.getDepartDetail(data.id)
      })
    },
    addDept(data) {
      this.node = data
      this.showDialog = true
    },
    async getDepartments() {
      const { companyName, depts } = await getDepartments()
      this.company.name = companyName
      this.departs = tranListToTreeData(depts)
      // this.getDepartments()
    },
    async delDept(id) {
      try {
        // 確認
        await this.$confirm('是否刪除')
        console.log('点击了是')
        // 发请求
        await delDepartment(id)
        // 提示成功
        this.$message.success('删除成功')
        // 刷新列表
        this.getDepartments()
      } catch (e) {
        console.log('点击了否')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
